
<!DOCTYPE html>
<html>
    <head>
        <title>knockout.js based example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/knockout.css" media="screen" />
        <script type="text/javascript" src="js-common/jquery-1.8.3.js"></script>
        <script type='text/javascript' src='js-common/knockout-2.2.1.js'></script>
        <script type="text/javascript" src="js-v1/studenteditor.js"></script>
    </head>
    <body>
        
        <h3>Student Editor - Iteration 1</h3>
        <div class="remarks">
        The first iteration of the student editor does not support object persistency.
        I.e., there is no communication with the server, the focus is on developing the client-side logic.
        Model and view are separated using <a href="http://knockoutjs.com/">knockout.js</a>. The list view is populated with
        some records, this is hard-coded in the script.
        
        </div>
        <table class="object_list">
            <thead>
                <tr><th>First Name</th><th>Name</th></tr>
            </thead>
            <!-- bind to properties of StudentListViewModel -->
            <tbody data-bind="foreach: students, visible: students().length > 0">
                <tr>
                    <td><input data-bind="value: firstName" /></td>
                    <td><input data-bind="value: name" /></td>
                </tr> 
            </tbody>
        </table>
        
        
        
        <h3>Student Editor</h3>
        <div class="remarks">
        In this form, new objects can be created and then added to the list.
        </div>
        <!-- bind to add() of list model -->
        <form class="new_object_editor" data-bind="submit: add">
            Add student: <input data-bind="value: newStudentFirstName" placeholder="first name here" />
            <input data-bind="value: newStudentName" placeholder="last name here" />
            <button type="submit">Add</button>
        </form>
        
        <hr/>
        &copy; Jens Dietrich, 2013
        
        <script>
            ko.applyBindings(new StudentListViewModel());
        </script>
    </body>
</html>
